<template>
  <div class="right-bar font-mini tw-text-[#333333]">
    <div class="flex-column-center tw-w-68 tw-rounded bg-color-white" style="box-shadow: 0 4px 12px 1px rgba(55,72,85,.12)">
      <div v-for="(item,index) in data.arr" >
        <RightBarItem :popoverItem="item"></RightBarItem>
<!--        <div v-if="index != 2" class="line-style"></div>-->
      </div>
    </div>
    <div class="tw-w-68 tw-h-77 tw-mt-20 tw-pt-14 tw-rounded bg-color-white flex-column-center right-bar-item" style="box-shadow: 0 4px 12px 1px rgba(55,72,85,.12)"
         @mouseover="isHovered = true" @mouseleave="isHovered = false" @click="scrollToTop">
      <img  class="tw-w-30 tw-h-30" :src="isHovered? activeTopIcon : topIcon" alt="">
      <span class="tw-pt-2 tw-pb-14">返回顶部</span>
    </div>
  </div>
</template>

<script setup>
import {onMounted, reactive, ref} from 'vue'
import serviceIcon from '@/assets/images/home/service-icon.png'
import activeServiceIcon from '@/assets/images/home/service-icon-active.png'
import miniProgramIcon from '@/assets/images/home/mini-program-icon.png'
import activeMiniProgramIcon from '@/assets/images/home/mini-program-icon-active.png'
import topIcon from '@/assets/images/home/top-icon.png'
import activeTopIcon from '@/assets/images/home/top-icon-active.png'
import miniProgramImage from '@/assets/images/home/mini-program.png'
import RightBarItem from './right-bar-item.vue'
import {useStore} from 'vuex';

const isHovered = ref(false)
const store = useStore();
onMounted(() => {
  setTimeout(() => {
    data.arr[0].qrImage = store.state.customerImg
  },200)
})
const data = reactive ({
  arr: [
      {
        title: '客服咨询',
        icon: serviceIcon,
        activeIcon: activeServiceIcon,
        qrImage: store.state.customerImg,
        content: '客服二维码',
        borderRadiusStyle: 'border-radius: 4px 4px 0 0'
      },
    // {
    //   title: '微信公众号',
    //   icon: wechatIcon,
    //   activeIcon: activeWechatIcon,
    //   qrImage: publicAccountImage,
    //   content: '网课公众号',
    //   borderRadiusStyle: 'border-radius: 0'
    // },
    {
      title: '微信小程序',
      icon: miniProgramIcon,
      activeIcon: activeMiniProgramIcon,
      qrImage: miniProgramImage,
      content: '网课小程序',
      borderRadiusStyle: 'border-radius: 0 0 4px 4px'
    },
  ]
})
function scrollToTop() {
  window.scrollTo({
    top: 0,
    behavior: 'smooth' // 平滑滚动
  });
}
</script>

<style lang="scss" scoped>
.right-bar {
  position: fixed;
  right: 0;
  top: 40%;
  z-index: 2;
  width: 68px;
  height: 333px;
  margin-right: 28px;
}
.right-bar-item {
  cursor: pointer;
}
.right-bar-item:hover {
  background-color: #04addb;
  border-radius: 4px;
  color: #ffffff;
}
.line-style {
  width: 48px;
  height: 1px;
  background:#eee;
  margin: 0 10px;
}
</style>
